<script lang="ts" setup>
import {defineProps} from 'vue';
import {type Card} from '@/types/card';
import NdSvgIcon from '@/components/modules/NdSvgIcon.vue';
import IconView from '@/components/icons/View.vue';
import IconCheckbox from '@/components/icons/Checkbox.vue';
import IconOrder from '@/components/icons/Order.vue';
defineProps<{
    card: Card
}>();
</script>
<template>
	<div class="card-name">
		{{ card.title }}
	</div>
	<div class="card-states">
		<div class="card-state">
			<nd-svg-icon>
				<icon-view />
			</nd-svg-icon>
		</div>
		<div class="card-state">
			<nd-svg-icon>
				<icon-order />
			</nd-svg-icon>
		</div>
		<div class="card-state complate-state">
			<nd-svg-icon>
				<icon-checkbox />
			</nd-svg-icon>
			<div class="complete-state-content">
				1/1
			</div>
		</div>
	</div>
	<div class="user-list">
		<div class="user-icon">
			<img
				src="@/assets/images/30.png"
				width="30"
				height="30"
				alt="icon"
			>
		</div>
		<div class="user-icon">
			<img
				src="@/assets/images/30.png"
				width="30"
				height="30"
				alt="icon"
			>
		</div>
		<div class="user-icon">
			<img
				src="@/assets/images/30.png"
				width="30"
				height="30"
				alt="icon"
			>
		</div>
	</div>
</template>
<style lang="scss" scoped>
@import '@/assets/scss/components/card.scss';
</style>